/*
 * @Description: 3.表单输入组件 item-input
 * @Author: skj
 * @Date: 2019-08-29 09:27:07
 * @LastEditors: skj
 * @LastEditTime: 2019-09-02 13:24:38
 */

import React, {Component} from "react";
import {View, StyleSheet, Text, TextInput, Image, ViewPropTypes, TouchableOpacity} from "react-native";
import PropTypes from "prop-types";
import ItemLine from "../item-line/index";
import Data from "@greens/utils/src/data";


export default class ItemCellView extends Component {
    /**
     * @description: 添加左侧辅助视图
     * @param {type}
     * @return:
     */

    layoutLeftAccessoryView = isShow => {
        if (isShow) {
            if (this.props.leftAccessoryComponent) {
                return this.props.leftAccessoryComponent;
            } else {
                return <Text style={styles.leftAccessory}>*</Text>;
            }
        } else {
            return null;
        }
    };
    /**
     * @description: 右侧辅助视图
     * @param {type}
     * @return:
     */
    layoutAccessoryView = () => {
        const {showRightAccessory, rightAccessoryComponent, rightAccessoryStyle} = this.props;
        if (showRightAccessory) {
            if (typeof rightAccessoryComponent == "string") {
                return <Text style={[styles.unit_style, rightAccessoryStyle]}>{rightAccessoryComponent}</Text>;
            } else if (typeof rightAccessoryComponent == "number") {
                return (
                    <Image
                        style={[styles.accessoryImage_style, rightAccessoryStyle]}
                        source={rightAccessoryComponent}
                    />
                );
            } else {
                return rightAccessoryComponent;
            }
        }
        return null;
    };

    render() {
        const {
            title,
            titleStyle,
            containerStyle,
            onChangeText,
            onBlur,
            leftContainerViewStyle,
            onEndEditing,
            showBottomLine,
            maxLength,
            contentStyle,
            showLeftAccessory,
            placeholder,
            placeholderTextColor,
            keyboardType,
            numberOfLines,
            multiline,
            onContentSizeChange,
        } = this.props;
        //输入框是否可编辑
        let editable = this.props.onPress || this.props.userEnable == false ? false : this.props.editable;
        //输入框文本内容处理
        let content = this.props.content != undefined && this.props.content != null ? String(this.props.content) : "";
        let activeOpacity = this.props.onPress ? this.props.activeOpacity : 1;
        return (
            <TouchableOpacity activeOpacity={activeOpacity} onPress={this.props.userEnable ? this.props.onPress : null}>
                <View style={[styles.container, {minHeight: 50}, containerStyle]}>
                    <View style={[styles.leftContainerViewStyle, leftContainerViewStyle]}>
                        {this.layoutLeftAccessoryView(showLeftAccessory)}
                        <Text style={[styles.title, titleStyle]} includeFontPadding={false} numberOfLines={1}>
                            {title}
                        </Text>
                    </View>
                    {editable ?
                        <TextInput
                            style={[styles.input_text_style, contentStyle]}
                            multiline={multiline}
                            onContentSizeChange={(contentSizeChangeEvent)=>{onContentSizeChange&&onContentSizeChange(contentSizeChangeEvent)}}
                            maxLength={maxLength}
                            underlineColorAndroid="transparent"
                            clearButtonMode={"while-editing"}
                            keyboardType={keyboardType}
                            defaultValue={content}
                            onChangeText={text => {
                                onChangeText && onChangeText(text);
                            }}
                            onEndEditing={event => {
                                onEndEditing && onEndEditing(event.nativeEvent.text);
                            }}
                            onBlur={event => {
                                onBlur && onBlur(event.nativeEvent.text);
                            }}
                            placeholder={placeholder}
                            placeholderTextColor={placeholderTextColor}
                            returnKeyType="done"
                            editable={editable}
                            pointerEvents={editable ? "auto" : "none"}
                        /> : <Text
                            style={[styles.input_text_style,
                                {paddingVertical: 15},
                                contentStyle,
                                (Data.isEmpty(content) && {color: placeholderTextColor})
                            ]}
                            numberOfLines={numberOfLines}
                        >{!Data.isEmpty(content) ? content : placeholder}</Text>
                    }
                    {this.layoutAccessoryView()}
                </View>
                {showBottomLine && <ItemLine/>}
            </TouchableOpacity>
        );
    }
}
ItemCellView.propTypes = {
    //是否响应用户点击事件,false则屏蔽所有事件:输入,点击...
    userEnable: PropTypes.bool,
    // 组件最外层样式
    containerStyle: ViewPropTypes.style,
    //左侧title
    title: PropTypes.string,
    titleStyle: PropTypes.oneOfType([Text.propTypes.style, ViewPropTypes.style]),
    //输入框占位符
    placeholder: PropTypes.string,
    //占位符 颜色
    placeholderTextColor: PropTypes.string,
    //输入框是否可编辑
    editable: PropTypes.bool,
    //监听输入框文本变动
    onChangeText: PropTypes.func,
    //监听输入框时区焦点
    onEndEditing: PropTypes.func,
    // 失去焦点的事件
    onBlur: PropTypes.func,
    //是否展示左侧辅助视图
    showLeftAccessory: PropTypes.bool,
    //自定义左侧视图
    leftAccessoryComponent: PropTypes.element,
    //左侧视图container
    leftContainerViewStyle: ViewPropTypes.style,
    //是否展示辅助视图
    showRightAccessory: PropTypes.bool,
    //右侧自定义右侧辅助视图
    rightAccessoryComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.number]),
    //右侧自定义右侧辅助视图样式
    rightAccessoryStyle: PropTypes.any,
    //点击组件触发
    onPress: PropTypes.func,
    //middle desc文本()
    content: PropTypes.any,
    //bottom是否添加线
    showBottomLine: PropTypes.bool,
    //middle布局样式
    contentStyle: PropTypes.oneOfType([Text.propTypes.style, ViewPropTypes.style]),
    //中间辅助文本
    attirbuteText: PropTypes.string,
    //限制文本框中最多的字符数
    maxLength: PropTypes.number,
    //键盘格式
    keyboardType: PropTypes.string,
    numberOfLines: PropTypes.number,
    //点击时透明度
    activeOpacity:PropTypes.number,
    //输入框文本size变化 
    onContentSizeChange:PropTypes.func,
    multiline:PropTypes.bool
};
ItemCellView.defaultProps = {
    editable: true,
    showRightAccessory: false,
    showBottomLine: true,
    keyboardType: "default",
    showLeftAccessory: false,
    userEnable: true,
    multiline: false,
    maxLength: 10000,
    placeholderTextColor: "#C8C8C8",
    rightAccessoryComponent: require("../images/item_arrow.png"),
    numberOfLines: 1,
    activeOpacity:0.62
};
const styles = StyleSheet.create({
    container: {
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: "#fff",
    },
    leftContainerViewStyle: {
        marginLeft: 15,
        flexDirection: "row",
        alignItems: "center",
        minWidth: 90
    },
    title: {
        textAlign: "left",
        textAlignVertical: "top",
        fontSize: 15,
        color: "#444444"
    },
    input_text_style: {
        flex: 1,
        marginLeft: 10,
        marginRight: 10,
        height: "100%",
        textAlignVertical: "center",
        // textAlign: "left",//此处设置导致iOS输入框异常换行
        color: "#333333",
        fontSize: 15
    },
    text_content: {
        flex: 1,
        marginLeft: 10,
        marginRight: 10,
        textAlignVertical: "center",
        textAlign: "left",
        color: "#333333",
        fontSize: 15
    },
    accessoryImage_style: {
        marginRight: 15
    },
    unit_style: {
        marginRight: 15,
        fontSize: 15,
        color: "#000000",
        textAlignVertical: "center"
    },
    leftAccessory: {
        fontSize: 15,
        color: "#E83C36"
    },
    content_attribute: {
        fontSize: 12,
        color: "#666666",
        textAlignVertical: "center"
    }
});
